<!-- 充值页面 -->
<template>
	<view class="myBalance" :style="{ '--bgcolor': vuex_config.themeColor1, '--price': vuex_config.price }">
		<template v-if="isInit">
			<view class="myBalance_ed">
				<text class="myBalance_text1">当前余额</text>
				<text class="myBalance_text2">{{ vuex_count.balance }}</text>
				<view class="myBalance_ed-icon" @click="onTips" v-if="judgeType">
					<u-icon name="e72c" size="40" custom-prefix="iconfont" />
				</view>
			</view>

			<view class="rechar_box">
				<view :class="{ money_nb: true, flex_c_c: true, moey_color: rechargeCurrent == index ? true : false }"
					v-for="(item, index) in rechargeList" :key="index" @click="tapClick(index, item.amount)"
					style="display: flex;flex-direction: column;">
					<view class="u-line-1 u-font-28">{{ item.amount }}</view>
					<view class="u-line-1 u-font-20">
						{{ item.donation_amount ? '送' + Number(item.donation_amount) : '' }}</view>
				</view>
			</view>
			<view class="myBalance_content">
				<view class="phone_money flex_c_sb mar_b60">
					<view class="phone_money_text"><input class="ipt" type="text" v-model="rechargeVal"
							placeholder="手动输入充值金额" /></view>
					<view :class="['money_cz', rechargeVal > 0 ? '' : 'money_disabled']" @click="tapRecharge">充值</view>
				</view>
				<view class="money_details">
					<view class="details_list">余额明细</view>
					<view class="details_item" v-for="(item, index) in dataList" :key="index">
						<view class="details_cont">
							<view class="text1">{{ item.remark }}</view>
							<view class="text2">
								{{ item.type == 1 ? '-' + item.amount : (item.amount > 0 ? '+' : '') + item.amount }}
							</view>
						</view>
						<view class="details_cont">
							<view class="text3 color_ccc">{{ item.date_creation | formTime }}</view>
							<view class="text4 color_ccc">{{ item.pay_type == 1 ? '微信支付' : '余额支付' }}</view>
						</view>
					</view>
				</view>
			</view>
			<u-modal v-model="show" title="余额充值" @confirm="sumit" @cancel="cancel" :show-cancel-button="true">
				<view class="" style="margin: 20rpx 0; text-align: center;">
					是否充值{{ !changeRechargeVal ? rechargeVal : changeRechargeVal }}元</view>
			</u-modal>
			<sww-load-more :params="dataListParams"></sww-load-more>
		</template>
		<u-modal v-model="showModel"  title='充值提示'>
			<view class="slot-content showModel-content">
				充值后，只能购买商城的产品，且该充值余额无法提现。
			</view>
		</u-modal>
		<sww-login></sww-login>
	</view>
</template>

<script>
	import {
		mapActions,
		mapState
	} from 'vuex';
	import {wxConfig} from '@/mixins/wxConfig.js'
	import {
		formatDate
	} from '@/utils/moment/index.js';
	import {
		pagingMixin
	} from '@/mixins/pagingMixin.js';
	import {
		payOrder
	} from '@/mixins/payOrder';
	import {
		balance
	} from '@/mixins/balance.js';
	export default {
		mixins: [pagingMixin, payOrder, balance,wxConfig],
		data() {
			return {
				isInit: false,
				rechargeVal: '', //输入的金额
				changeRechargeVal: 0, // 点击充值金额
				rechargeCurrent: '', //当前充值选择的下标
				showModel:false,
				rechargeList: [
					//当前循环的充值价格
					{
						amount: '10',
						name: 10,
						donation_amount: 0, // 赠送金额
						integral: 0
					},
					{
						amount: '50',
						name: 50,
						donation_amount: 0, // 赠送金额
						integral: 0
					},
					{
						amount: '100',
						name: 100,
						donation_amount: 0, // 赠送金额
						integral: 0
					},
					{
						amount: '500',
						name: 500,
						donation_amount: 0, // 赠送金额
						integral: 0
					}
				],
				show: false,
				dataList: [] //消费信息列表
			};
		},
		filters: {
			formTime(time) {
				return formatDate(time, 'YYYY-MM-DD HH:mm:ss');
			}
		},
		computed: {
			...mapState(['vuex_count']),
			judgeType(){
				return  [1023,1048].includes(this.vuex_business.pk_id) 
			},
		},
		onLoad() {
			// #ifdef H5
			this.initWxConfig(['chooseWXPay']).then(() => {}).catch(() => {});
			// #endif
			this.init();
			// 获取充值信息列表
			this.$resPost('GetRechargeList').then(({
				data
			}) => {
				if (data.length > 0) {
					this.rechargeList = data;
				}
			});
		},
		onReachBottom() {
			this._load_data();
		},
		methods: {
			onTips(){
				this.showModel = true
			},
			...mapActions(['loadUserCount']),
			init() {
				this.$login('init', {}, 'logoFail').then(() => {
					this.isInit = true;
					//消费明细
					this.$initPage();
					this.loadUserCount();
				});
			},
			logoFail() {
				uni.navigateBack({
					delta: 1,
					fail: () => {
						this.$linkTo('index');
					}
				});
			},
			$initPage() {
				this._init_data('GetUsersConsume', {
					status: 1
				});
			},
			//点击获取选择金额 参数一:下标,参数二:选择的金额
			tapClick(idx, number) {
				this.rechargeCurrent = idx;
				this.changeRechargeVal = number;
				this.show = true;
			},
			// 输入框点击充值
			tapRecharge() {
				let reg = /^((0\.[0-9]{1,2})|(([1-9]+[0-9]*)(\.[0-9]{1,2})?))$/;
				if (reg.test(this.rechargeVal)) {
					this.show = true;
				} else {
					this.$toast({
						title: '请输入最多两位小数的金额'
					});
				}
			},
			sumit() {
				// let actualprice = Number(this.changeRechargeVal) > 0 ? Number(this.changeRechargeVal) + Number(this.rechargeList[this.rechargeCurrent].donation_amount) : this.rechargeVal;
				let amount = Number(this.changeRechargeVal || this.rechargeVal);
				let donation_amount = Number(this.changeRechargeVal) > 0 ? Number(this.rechargeList[this.rechargeCurrent]
					.donation_amount) : 0;
				let integral = Number(this.changeRechargeVal) > 0 ? Number(this.rechargeList[this.rechargeCurrent]
					.integral) : 0;
				this.$loading();
				this.Addrecharge(amount, donation_amount, integral)
					.then(() => {
						this.$hide();
						this.init();
						this.changeRechargeVal = 0;
						this.rechargeVal = '';
					})
					.catch(() => {
						this.$hide()
						this.$toast('支付失败');
						// this.init();
						this.changeRechargeVal = 0;
						// this.rechargeVal = '';
					});
			},
			cancel() {
				this.show = false;
				this.changeRechargeVal = '';
				this.rechargeVal = '';
			}
		}
	};
</script>

<style lang="scss" scoped>
	.myBalance {
		width: 100%;
		height: 100%;
	}

	.myBalance_ed {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 750rpx;
		height: 320rpx;
		background: var(--bgcolor);
		color: #fff;

		.myBalance_ed-icon {
			position: absolute;
			top: 20rpx;
			right: 20rpx;
		}
	}
	
	.showModel-content {
		padding: 20rpx;
		font-size: 26rpx;
	}

	.myBalance_ed .myBalance_text1 {
		margin-top: 80rpx;
		font-size: 26rpx;
		margin-bottom: 27rpx;
		display: block;
	}

	.myBalance_ed .myBalance_text2 {
		font-size: 90rpx;
		font-weight: 700;
	}

	.flex_c_sb {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.rechar_box {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		padding: 0 20rpx;
		margin-bottom: 40rpx;

		.money_nb {
			width: 156rpx;
			height: 80rpx;
			border: 1rpx solid #cccccc;
			border-radius: 8rpx;
			color: #cccccc;
			margin: 20rpx 10rpx 0;

			&.flex_c_c {
				display: flex;
				align-items: center;
				justify-content: center;
			}

			&.moey_color {
				border: 1px solid var(--bgcolor);
				color: var(--bgcolor);
			}
		}
	}

	.phone_money_text {
		display: flex;
		align-items: center;
		width: 250px;
		height: 35px;
		background: #f5f5f5;
		border-radius: 4px;
	}

	.phone_money_text input {
		padding-left: 20rpx;
	}

	.myBalance_content {
		padding: 0 30rpx;
	}

	.money_cz {
		text-align: center;
		line-height: 70rpx;
		color: #fff;
		width: 160rpx;
		height: 70rpx;
		background: var(--bgcolor);
		border-radius: 8rpx;

		&.money_disabled {
			background-color: #ddd;
		}
	}

	.mar_b60 {
		margin-bottom: 60rpx;
	}

	.money_details .details_item:first-child {
		margin-top: 39rpx;
	}

	.money_details {
		.details_list {
			font-size: 30rpx;
			font-weight: bold;
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid #dddddd;
		}
	}

	.details_item {
		padding: 20rpx 0;

		.color_ccc {
			color: #ccc;
		}

		.details_cont {
			margin-bottom: 5rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.text1 {
				color: #333333;
				font-size: 28rpx;
				font-weight: 500;
			}

			.text2 {
				color: var(--price);
			}

			.text3 {
				font-size: 24rpx;
			}

			.text {
				font-size: 28rpx;
			}
		}
	}

	.ipt {
		width: 100%;
		padding-right: 20rpx;
		background-color: #F5F5F5;
	}

	.ipt .uni-input-placeholder {
		font-size: 26rpx;
		color: #999999;
	}
</style>
